<template>
  <div class="register-page">
    <nav-bar>新用户注册</nav-bar>
    <div class="register-page__header">
      <van-image src="https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png"/>
      <div class="register-page__content">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
                v-model="registerState.name"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="registerState.password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                v-model="registerState.password_confirmation"
                type="password"
                name="确认密码"
                label="确认密码"
                placeholder="确认密码"
                :rules="[{ required: true, message: '请填写确认密码' }]"
            />
            <van-field
                v-model="registerState.email"
                name="邮箱"
                label="邮箱"
                placeholder="例如:123@abc.com"
                :rules="[{ required: true, message: '请填写邮箱' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" color="#44b883" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
        <div class="login-link" @click="router.push({
        path:'/login',
        })">
          已有账号，立即登录
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from "@/components/common/navbar/NavBar.vue";
import {register} from "@/network/api/modules/profile";
import {showFailToast, showSuccessToast} from "vant";
import {useRouter} from "vue-router";
import {reactive} from "vue";

const router = useRouter();
const registerState = reactive<{
  name: string;
  password: string;
  password_confirmation: string;
  email: string;
}>({
  name: "",
  password: "",
  password_confirmation: "",
  email: ""
});
function onSubmit(values: any) {
  console.log("submit", values);

  if (registerState.password != registerState.password_confirmation) {
    showFailToast("两次密码不一致，请重新输入!");
  } else {
    register(registerState).then((res) => {
      if (res.status === 201) {
        showSuccessToast("注册成功");
      }
      // 清空密码表单
      registerState.password = "";
      registerState.password_confirmation = "";
    });
  }
}

</script>

<style lang="scss" scoped>
.register-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fcfcfc;

  &__header {
    margin-top: 20px;
  }

  &__content {
    margin-top: 20px;
  }

  .login-link {
    color: #42b983;
    margin-top: 20px;
    text-decoration: underline;
    font-size: 20px;
  }
}
</style>